<div class="p-12 flex flex-col justify-center gap-10">

    <x-filament::tabs label="Content tabs">

        <x-filament::tabs.item
            :active="$status == 'all'"
            wire:click="$set('status', 'all')"
        >
            全部
        </x-filament::tabs.item>
        @foreach($tabs as $key => $tab)

            <x-filament::tabs.item
                :icon="$tab->getIcon()"
                :active="$status == $key"
                wire:click="$set('status', '{{$key}}')"
            >
                {{$tab->getLabel()}}
            </x-filament::tabs.item>
        @endforeach

    </x-filament::tabs>

    <div class="w-8/12 mx-auto min-h-80 h-full overflow-y-auto sm:px-6 lg:px-8 flex flex-col gap-10" x-data = "{
        order_id: 0,
        remark: '',
        showModal(id){
            this.order_id  = id
            $dispatch('open-modal', { id: 'returned' })
        },
        submitForm(){
            $wire.refundable(this.order_id,this.remark)
            $dispatch('close-modal', { id: 'returned' })
        }
    }">

                <div class="flex gap-10 justify-between  px-4 font-semibold text-gray-500">
                    <p>图书</p>
                    <p>数量</p>
                    <p>价格</p>
                    <p class="hidden md:block">订单号</p>
                    <p>时间</p>
                    <p>状态</p>
                    <p>操作</p>
                </div>
                @foreach($orders as $order)
                    <div class="flex shadow-xl  bg-white cursor-pointer items-center justify-between transition ease-in-out duration-300 hover:-translate-y-1  sm:rounded-lg px-4 py-4 gap-10" wire:key="{{$order->id}}">
                        <img wire:ignore class="w-24 h-28 object-cover" src="{{\Illuminate\Support\Facades\Storage::url($order->book->img)}}" alt=""/>
                        <div class="flex flex-col justify-center gap-2 w-32">
                            <p class="font-bold">{{$order->book->title}}</p>
                            <p class="text-red-400"> × {{$order->num}}</p>
                        </div>
                        <div class="text-red-500 w-20">
                            ¥ {{$order->book->price}}
                        </div>
                        <div class="font-bold hidden md:block">
                            {{$order->sn}}
                        </div>
                        <div class="font-bold w-30">
                            {{$order->created_at}}
                        </div>
                        <x-filament::badge :icon="$order->status->getIcon()" :color="$order->status->getColor()">
                            {{ $order->status->getLabel() }}
                        </x-filament::badge>
                        <div class="w-20">
                            @if($order->status == \App\Enums\OrderStatus::HAS_PAY)
                                <x-filament::button x-on:click="showModal({{$order->id}})">
                                    去退款
                                </x-filament::button>
                            @endif
                        </div>


                    </div>
                @endforeach
        <div class="flex justify-center w-full my-10">
            {{ $orders->links() }}
        </div>
            <x-filament::modal id="returned">
                <div class="flex flex-col gap-3">
                    <p class="font-semibold text-black text-base">退款备注:</p>
                    <x-filament::input.wrapper>
                        <x-filament::input
                            type="textarea"
                            rows="6"
                            x-model="remark"
                        />
                    </x-filament::input.wrapper>
                    <x-filament::button x-on:click="submitForm">
                        提交
                    </x-filament::button>
                </div>
            </x-filament::modal>
    </div>
</div>
